<template>
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view v-for="(item, index) in list" :key="index" class="tab-bar-item" :data-path="item.pagePath" :data-index="index" @tap="switchTab">
    <cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
    <cover-view :style="'color: ' + (selected === index ? selectedColor : color)">{{item.text}}</cover-view>
  </cover-view>
</cover-view>
</template>

<script>

export default {
  data() {
    return {
      selected: 0,
      color: "#7A7E83",
      selectedColor: "#3cc51f",
      list: [{
        pagePath: "/index/index",
        iconPath: "/static/image/icon_component.png",
        selectedIconPath: "/static/image/icon_component_HL.png",
        text: "组件"
      }, {
        pagePath: "/index/index2",
        iconPath: "/static/image/icon_API.png",
        selectedIconPath: "/static/image/icon_API_HL.png",
        text: "接口"
      }]
    };
  },

  components: {},
  props: {},

  beforeMount() {},

  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      wx.switchTab({
        url
      });
      this.setData({
        selected: data.index
      });
    }

  }
};
</script>
<style>
@import "./index.css";
</style>